<template>
  <a-select v-model="value" placeholder="请选择"  @change="onChange"  :mode="mode" :showSearch="showSearch"  :allowClear="allowClear" :disabled="disabled"  >
    <a-select-option v-for="item in dictData" :key="item.dictKey" :value="item.dictKey">{{ item.dictValue }}</a-select-option>
  </a-select>
</template>

<script>
import { getDictCondition} from "@/services/system/api"
export default {
  name: 'ZhTableSelect',
  props: {
    params: {
      type: Object,
      default: () => {},
      required: false
    },
    renderOpts: {
      type: Object,
      default: () => {},
      required: false
    }
  },
  data () {
    return {
      row: undefined,
      column: undefined,
      dictData: {},
      value: undefined,
      retValue:undefined,
      label: undefined,
      allowClear:true,
      mode:'default',
      showSearch:true,
      disabled:false
    }
  },
  watch: {
    params (data) {
        this.init(this.renderOpts)
    },
    renderOpts(data){
        this.init(this.data)
    }
  },
  created () {
    this.init(this.renderOpts)
  },
  methods: {
    init(data){
        let props=data.props
        if(!props){
            return
        }
        if(data.mode){
            this.mode=data.mode
        }
        if(data.options&&data.options.length>0){
            this.dictData = data.options
            this.load()
        }else{
            const params = Object.assign({},props)
            this.$http.post(getDictCondition,params).then(res => {
                this.dictData = res.result; 
                this.load()
            })
        }
    },
    load () {
      const { row, column } = this.params
      this.row = row
      this.column = column
      let key = column.property.replace('Name', undefined)
      if (!key) {
        key = column.property
      }
      if(this.mode=='multiple'){
          if (row[key]) {
            this.value = row[key].split(",")
        } else {
            if (row[column.property]) {
                this.value = row[column.property].split(",")
            }
        }
      }else{
        if (row[key]) {
            this.value = row[key]
        } else {
            if (row[column.property]) {
                this.value = row[column.property]
            }
        }
      }
      
    },
    onChange (value) {
      // this.label = option.label
      if(this.mode=='multiple'){
            if (value&&value.length>0) {
                let label=null
                this.dictData.forEach((item) => {
                    value.forEach((str) => {
                        if (item.dictKey === str) {
                            if(label){
                                label=label+','+item.dictValue
                            }else{
                                label=item.dictValue
                            }
                            
                        }
                    })
                    
                })
                this.label=label
            }else {
                this.label = undefined
                this.retValue= undefined
            }
           
      }else{
        if (value) {
            this.dictData.forEach((item) => {
                if (item.dictKey === value) {
                this.label = item.dictValue
                return undefined
                }
            })
        } else {
            this.label = undefined
        }
      }
        const { row, column } = this
        const key = column.property.replace('Name', '')
        row[column.property] = this.label
        row[key] = this.retValue
        if (this.renderOpts.events) {
            if (this.renderOpts.events.change) {
                this.renderOpts.events.change(value, row)
            }
        }
    }
  }
}
</script>
